import React, { Component} from 'react'
import Navitem from './Navitem'
import {get} from '../../utils/http'
import BScroll from 'better-scroll'
import _ from 'lodash'
export default class NavlistTab extends Component {
    constructor(){
        super()
    this.state={
            list:[],
            currentindex:0,
            itemlist:[],
        }          
    }  
   handleclick=async (index,value)=>{     
     //  console.log(value);   
     let page=1  
     let result=await get(`https://m.tuniu.com/travel/mapi/channel/getCmsProductAjax?moduleId=${value.mId}&currentPage=${page}&pageSize=10`)
     this.setState({
        itemlist:result.data.data.mItems
     })
  //   console.log(this.state.itemlist); 
       this.setState({
            currentindex:index
        })  
    
    }
    UNSAFE_componentWillReceiveProps(props){     
               this.setState({
                   list:props.title,
               })                 
             
    }
   async componentDidMount(){    
       var that=this
       let page=1;        
        let result=await get(`https://m.tuniu.com/travel/mapi/channel/getCmsProductAjax?moduleId=22778928&currentPage=${page}&pageSize=10`)
        this.setState({
           itemlist:result.data.data.mItems
        })
     //   console.log(this.state.itemlist); 
     const wrapper = document.querySelector('.wrapper')
     const bs=new BScroll(wrapper,{  click: true,
         pullDownRefresh: true,
         pullUpLoad: true,
     })      
     bs.on("pullingDown", function () {                          
         bs.finishPullUp();
         bs.finishPullDown();                   
        bs.refresh()
     })
     bs.on("pullingUp",_.debounce(async function () {   
         let page=1
              page++
        let result=await get(`https://m.tuniu.com/travel/mapi/channel/getCmsProductAjax?moduleId=22778928&currentPage=${page}&pageSize=10`)
        that.setState({
           itemlist:[...that.state.itemlist,...result.data.data.mItems]
        })                      
        bs.finishPullUp();
        bs.finishPullDown();                   
        bs.refresh()
    },500))
    }
    render() {        
        return (
            <>
             <ul>
               {
              this.state.list.map((value,index)=>{
              return (
              <li key={value+index} id={value.mId}  className={this.state.currentindex==index? 'active':''} onClick={() => {
                  this.handleclick(index,value)
              }
              }>
                  {value.mTitle}
                  </li>
                  )  
                   })
               }
            </ul> 
            <div> 
                 <Navitem mid={this.state.itemlist}></Navitem>
            </div>
       
            </>
        )
    }
}
